<template>
  <div class="transponddcard">
    <div class="transponddcard__body">
      <el-avatar class="transponddcard__body__avatar" :size="34" :src="info.avatar">
        <img v-if="!info.dialCode" src="../../../assets/picture/群头像150.png" />
      </el-avatar>
      <span>{{ name }}</span>
    </div>
    <el-checkbox v-model="checked" @change="change" :disabled='disabled'/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'

const diasbleGroupStateArr = ['dissolved', 'exitGroup', 'delGroupMember', 'openUserForbidSpeak', 'openGroupForbidSpeak']
export default {
  props: ['info'],
  computed: {
    ...mapState('transpond', ['selectUserIds']),
    name: function () {
      return this.info.nickName ? this.info.nickName : this.info.name
    },
    disabled: function () {
      return diasbleGroupStateArr.includes(this.info.groupState)
    }
  },
  data () {
    const index = _.findIndex(this.selectUserIds, e => e + '' === this.info.roomId + '')
    return {
      checked: (index !== -1)
    }
  },
  methods: {
    change () {
      if (this.checked) {
        this.$store.dispatch('transpond/setSelectUserIds', [...this.selectUserIds, this.info.roomId + ''])
      } else {
        const temp = _.cloneDeep(this.selectUserIds)
        _.remove(temp, e => e + '' === this.info.roomId + '')
        this.$store.dispatch('transpond/setSelectUserIds', temp)
      }
    }
  },
  watch: {
    selectUserIds: {
      handler (data, olddata) {
        const index = _.findIndex(this.selectUserIds, e => e + '' === this.info.roomId + '')
        this.checked = (index !== -1)
      }
    }
  }
}
</script>

<style lang="scss">
.transponddcard {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .el-checkbox__inner {
    border-radius: 20px;
  }
  &__body {
    display: flex;
    align-items: center;
    &__avatar {
    margin-right: 11px;
    font-size: 16px;
    }
    span{
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 150px;
    }
  }
}
</style>
